<template>
	<view class="content">
		<Header />
		<view class="home-tabs">
			<u-tabs
				:list="topBar"
				:current="current"
				@change="changeTabs"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					fontSize: '29rpx'
				}"
				:inactiveStyle="{
					color: '#AAAAAA'
				}"
			></u-tabs>
		</view>
		<view class="home-swiper">
			<swiper :duration="500" :current="current" @change="changeSwiper" :style="'height:' + swiperHeight + 'px'">
				<swiper-item v-for="(item, index) in topBar" :key="index">
					<scroll-view scroll-y="true" :style="'height:' + swiperHeight + 'px'" @scrolltolower="handleLower">
						<!-- 做组件缓存，避免切换tab时的空白页面 -->
						<keep-alive>
							<!-- <component :is="activeCom" v-if="index == current" :courseSearchList="getCourseSearchList()"></component> -->
							<component :is="activeCom" v-if="index == current" :ref="childComponents()"></component>
						</keep-alive>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import Header from '@/components/common/Header.vue';
import Recommend from '@/components/home/recommend.vue';
import Free from '@/components/home/free.vue';
import ActualCombat from '@/components/home/actualCombat.vue';
import { mixin } from '../../mixins/mixin';
export default {
	mixins: [mixin],
	components: {
		Header,
		Recommend,
		Free,
		ActualCombat
	},
	data() {
		return {
			current: 0,
			swiperHeight: 0,
			topBar: [
				{
					name: '今日推荐'
				},
				{
					name: '免费课程'
				},
				{
					name: '实战课程'
				}
			],
			activeCom: Recommend,
			componentsArray: ['recommend', 'free', 'actualCombat']
		};
	},
	onReady() {
		this.swiperHeight = this.getHeight('.header-search', '.home-tabs');
	},
	methods: {
		//切换tabs
		changeTabs({ index }) {
			this.current = index;
			this.tabsCom(this.current);
		},
		//切换swiper
		changeSwiper(e) {
			this.current = e.detail.current;
			this.tabsCom(this.current);
		},
		//动态组件显示
		tabsCom(index) {
			switch (index) {
				case 0:
					this.activeCom = Recommend;
					break;
				case 1:
					this.activeCom = Free;
					break;
				case 2:
					this.activeCom = ActualCombat;
					break;
			}
		},
		childComponents() {
			return this.componentsArray[this.current];
		},
		handleLower() {
			// 获取当前激活组件的ref
			const refName = this.componentsArray[this.current];
			const childComponent = this.$refs[refName];
			// 如果子组件存在并且有loadMore方法，则调用它
			if (childComponent[0] && typeof childComponent[0].loadMore === 'function') {
				childComponent[0].loadMore();
			}
		}
	}
};
</script>

<style>
.u-tabs__wrapper__nav__item__text {
	font-size: 29rpx;
	font-weight: 400;
}

.home-swiper {
	/* padding: 29rpx; */
}
</style>
